<template>
  <div>
    <div style="border-bottom: 1px black soild">
      <div style="float: left; margin-left: 200px">
        工作区：<el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 40%"
        ></el-input>
      </div>
      <div style="float: left; margin-left: 200px">
        <div class="block" style="float: left">
          起止月份：
          <el-date-picker
            v-model="value"
            type="monthrange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
             @change="dateChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div style="float: left; margin-left: 200px">
        <el-row>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </el-row>
      </div>
    </div>
    <hr />
    <div>
      <Month
        mixtureId="mixtureId"
        :MixtureData="MixtureData"
        :xAxisData="xAxisData"
        :text="value"
      />
      <div class="list">
        <month-table :data="tableData"></month-table>
      </div>
    </div>
  </div>
</template>
<script>
import Month from "../../components/month.vue";
import MonthTable from "../../components/energy/monthTable.vue";
import { listMonth } from "@/api/system/energy";
export default {
  components: { Month, MonthTable },
  data() {
    return {
      xAxisData: [],
      input: "",
      value: "",
      queryParams: {
        startMonth: "2021-03-24",
        endMonth: "2022-02-26",
        areaId: "2e6c8e19512d422f961d4ecd783c39f5",
      },
    //   queryParams: { // 需要查询的数据集合,开始月份为当前月减去五个月
    //     time: [new Date(new Date().setMonth((new Date().getMonth() - 5))), new Date()],
    //     areaId: '1',
    //     startMonth: '',
    //     endMonth: '',
    //     options:{
    //         onPick: ({ endMonth, startMonth }) => {
    //             this.startMonth = startMonth;
    //             this.endMonth = endMonth;
    //         },
    //         disabledDate: (time) => {
    //             if (this.startMonth) {
    //                 let start = new Date(JSON.parse(JSON.stringify(this.startMonth)))
    //                 let end = new Date(JSON.parse(JSON.stringify(this.startMonth)))
    //                 return (
    //                     time.getTime() > +new Date(start.setMonth((start.getMonth() + 11))) ||
    //                     time.getTime() < +new Date(end.setMonth((end.getMonth() - 11)))
    //                 );
    //             }
    //             return false
    //         },
    //     },
    // },

      tableData: [], // 表格数据
      MixtureData: {
        grid: {
          right: "20%",
        },
        legend: {
          data: [
            "总能耗成本(元)",
            "单车能耗成本(元/台)",
            "预计产量",
            "实际产量",
          ],
        },
        series: [
          {
            name: "总能耗成本(元)",
            type: "bar",
            data: [],
            barWidth: "50%",
          },
          {
            name: "单车能耗成本(元/台)",
            type: "bar",
            data: [],
            barWidth: "50%",
          },
          {
            name: "预计产量",
            type: "line",
            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: [],
            symbolSize: 10,
          },
          {
            name: "实际产量",
            type: "line",
            yAxisIndex: 1,
            data: [],
            symbolSize: 10,
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listMonth(this.queryParams).then((response) => {
        this.tableData = response;
        console.log(this.tableData);
        if (response.lenght != 0) {
          response.forEach((item, key) => {
            this.tableData[key].completion = item.completion;
            this.xAxisData.push(item.date);
            this.MixtureData.series[0].data.push(item.totalEnergy);
            this.MixtureData.series[1].data.push(item.avgEnergy);
            this.MixtureData.series[2].data.push(item.forecast);
            this.MixtureData.series[3].data.push(item.actual);
          });
        }
      });
    },
        // 时间范围
    dateChange (e) {
        this.queryParams.time = e;
        if (e !== null) {
            this.startMonth = '';
            this.endMonth = '';
            this.options = {
                onPick: ({ endMonth, startMonth }) => {
                    this.startMonth = startMonth;
                    this.endMonth = endMonth;
                },
                disabledDate: (time) => {
                    if (this.startMonth) {
                        let start = new Date(JSON.parse(JSON.stringify(this.startMonth)))
                        let end = new Date(JSON.parse(JSON.stringify(this.startMonth)))
                        return (
                            time.getTime() > +new Date(start.setMonth((start.getMonth() + 11))) ||
                            time.getTime() < +new Date(end.setMonth((end.getMonth() - 11)))
                        );
                    }
                    return false
                },
            };
        }
    },
    pickerOptions() {
      console.log(ddfff);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style>
</style>